/* <img v-draggable stc="https://xxxx.png" class="fixed t0 l0 zx30" /> */
export const draggable = {
  inserted: function (el) {
    el.style.cursor = 'move'
    el.style.position = 'fixed'
    el.style.userSelect = 'none'
    el.style.zIndex = '30'  
    el.draggable = true
    const [maxWidth, maxHeight] = [_.get100vw(), _.get100vh()]
    el.ondragstart = function (e) {
      el.elObj = _.getViewPos(el)
      const { top, left, width, height } = el.elObj 
      el.style.left = left + 'px'
      el._width = width
      el._height = height
      el.style.top = top + 'px'
      el.adjustWidth = _.range(e.x - left, 0, e.x)
      el.adjustHeight = _.range(e.y - top, 0, e.y)
    }
    el.ondrag = function (e) {
      el.style.left = Number(_.range(e.x - el.adjustWidth, 0, maxWidth - el._width)) + 'px'
      el.style.top = Number(_.range(e.y - el.adjustHeight, 0, maxHeight - el._height)) + 'px'
    }
    el.ondragend = function (e) {
      el.style.left = Number(_.range(e.x - el.adjustWidth, 0, maxWidth - el._width)) + 'px'
      el.style.top = Number(_.range(e.y - el.adjustHeight, 0, maxHeight - el._height)) + 'px'
    }
  },
}